<template>
<div>
<button @click="fang()">x</button>
<div id="main"></div>
</div>
</template>
<script>
export default {
methods: {
fang(){
var myChart = this.echarts.init(document.getElementById('main'))
let option={
// legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
source: [
['jan',34,20,'xx',52],
['feb',28,14,'yy',54],
['mar',45,32,'zz',42],
['apr',69,46],
['may',30,24],
['jun',43,23],
['jul',33,23],
['aug',23,13],
['sep',23,20],
]
},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: {type: 'category'},
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [{
type:'pie',
center:['65%',60],
radius:35,
encode:{itemName:3,value:4}
},
{
type:'line',
encode:{x:0,y:1}
},
{
type:'bar',
encode:{x:0,y:2}
}
]
}
myChart.setOption(option)
}
}
}
</script>
<style>
#main{
width: 100vw;
height: 100vh;
}
</style>
动态图表
<template>
<div>
<button @click="fang()">x</button>
<div id="main"></div>
</div>
</template>
<script>
export default {
methods: {
fang(){
var myChart = this.echarts.init(document.getElementById('main'))
var data =[]
for(let i=0;i<5;++i){
data.push(Math.round(Math.random()*200))
}
let option={
xAxis: {
max: 'dataMax',
},
yAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E'],
inverse: true,
animationDuration: 300,
animationDurationUpdate: 300,
max: 4 // only the largest 3 bars will be displayed
},
series: [{
realtimeSort: true,
name: 'X',
type: 'bar',
data: data,
label: {
show: true,
position: 'right',
valueAnimation: true
},itemStyle: {
// 设置扇形的颜色
color: function(params) {
// build a color map as your need.
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]},
// shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}],
legend: {
show: true
},
animationDuration: 0,
animationDurationUpdate: 3000,
animationEasing: 'linear',
animationEasingUpdate: 'linear'
};
function run () {
var data = option.series[0].data;
for (var i = 0; i < data.length; ++i) {
if (Math.random() > 0.9) {
data[i] += Math.round(Math.random() * 2000);
}
else {
data[i] += Math.round(Math.random() * 200);
}
}
myChart.setOption(option);
}
setTimeout(function() {
run();
}, 0);
setInterval(function () {
run();
}, 3000);}
}
}
</script>
<style>
#main{
width: 50vw;
height: 50vh;
}
</style>
