componentDidMount(){
var echarts = require('echarts');
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: { text: '累计投资额' },
tooltip: {},
xAxis: {
type:'category' ,
axisTick:{
show:true,
alignWithLabel:true,
},
data:this.state.date
},
yAxis: {
type:'value',
},
series: [{
name: '累计投资额',
type: 'line',
data: this.state.data
}]
});
}
export function createChart(render, chartData, option, expandOption, theme) {
if (chartData) {
option.series = chartData;
_setSeriesType(option.series, option._type);
}
const chart = echarts.init(render, theme, expandOption);
chart.setOption(option);
return chart;
}
export default (originData, Ntarget) => {
let myChart = echarts.init(Ntarget);
originData.forEach(item => {
option.xAxis.data.push(item.date);
option.series[0].data.push(item.count);
});
myChart.setOption(option);
}
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/pie');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: { text: 'ECharts 入门示例' },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
constructor(element) {
this.echart = echarts.init(element);
window.addEventListener("resize", this.resize);
}
module.controller('EchartsPieController', function($scope, $element, $rootScope, Private, Notifier) {
var tabifyAggResponse = Private(require('ui/agg_response/tabify/tabify'));
var notify = new Notifier({ location: 'kibana-plugin-echarts/EchartsPieController'});
let mychart = echarts.init($element.get(0));
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:["dm"]
},
series: [
{
name:'饼图',
type:'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data:[{name:"dm",value:123}]
}
]
};
var data=[],legendData=[];
$scope.$watch('esResponse', function(resp) {
if (!resp) {
return;
}
console.log("--------------resp---------------------");
console.log(resp);
var tableGroups = tabifyAggResponse($scope.vis, resp);
console.log(tableGroups)
console.log("--------------mychart---------------------");
tableGroups.tables.forEach(function (table,index) {
var cols = table.columns;
data= [], legendData=[];
table.rows.forEach(function (row,i) {
console.log(row[0])
console.log(row[0].toString())
console.log(row[1])
var item = {};
var name = row[0].toString()
item.name = name;//cols[i].aggConfig.params.field.displayName;
item.value = row[1];
data.push(item);
legendData.push(name);
});
option.series[index].data=data;
});
option.legend.data=legendData;
mychart.setOption(option,true);
return notify.timed('Echarts Pie Controller', resp);
});
});
componentDidMount() {
const {
xAxisData,
data,
title
} = this.props;
const legendData = [];
const seriesData = [];
data.map(function(value) {
legendData.push(value.name);
seriesData.push({
name: value.name,
type: 'bar',
barWidth: 30,
data: value.data
});
});
this.chart = echarts.init(this.refs.bar);
this.chart.setOption({
title: {
text: title,
left: 20,
top: 20
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: legendData,
right: 40,
top: 20
},
grid: {
x: 50,
x2: 50,
y: 70,
y2: 30,
borderWidth: 0
},
xAxis: [{
type: 'category',
axisLine: false,
splitLine: false,
axisTick: {
length: 4,
lineStyle: {
color: '#ccc'
}
},
data: xAxisData
}],
yAxis: [{
type: 'value',
axisLine: true,
axisTick: false,
splitLine: {
lineStyle: {
color: '#e9e9e9'
}
}
}],
color: ["#5d9cec", "#62c87f", "#f15755", "#fc863f", "#7053b6", "#ffce55", "#6ed5e6", "#f57bc1", "#dcb186", "#647c9d", "#cc99ff"],
series: seriesData
});
}
import $ from 'jquery';
import Component from '@ember/component';
import debounce from 'lodash-es/debounce';
import echarts from 'echarts/lib/echarts';
import { observer } from '@ember/object';
import { on } from '@ember/object/evented';
export default Component.extend({
classNames: ['stats-drilldown-results-chart'],
didInsertElement() {
this.renderChart();
},
renderChart() {
this.chart = echarts.init(this.$()[0], 'api-umbrella-theme');
this.draw();
$(window).on('resize', debounce(this.chart.resize, 100));
},
// eslint-disable-next-line ember/no-on-calls-in-components
refreshData: on('init', observer('hitsOverTime', function() {
let data = []
let labels = [];
let hits = this.hitsOverTime;
for(let i = 1; i < hits.cols.length; i++) {
data.push({
name: hits.cols[i].label,
type: 'line',