一、数据
我引用的数据如图,第一列对应‘@1’,以此类推。
二、操作
1、选择“其他视图”中的叙述
2、记得勾选“包含HTML标记”,然后分别输入前缀、叙述、后缀部分的代码(PS:这三个部分的代码均是由<script> </script>标签括起来的,最后有示例)
三、效果截图
四、代码
//前缀
<!--引入 ECharts文件,注意路径的正确与否 -->
<script src="/analyticsRes/echarts/dist/echarts.js"></script>
<!--为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:320px;"></div>
<script type="text/javascript">
//初始化echarts实例
var myChart =echarts.init(document.getElementById('main'));
var data1=[];
var data2=[];
</script>
//叙述
<script>
data1.push('@1');
data2.push({value:'@2'});
</script>
//后缀
<script>
var option = {
title: {
text: 'ECharts入门示例'
},
//底部居中显示的图例
legend: {
data:['排产数量'],
x:'center',
bottom:-5
},
//x轴data来自于变量data1
xAxis: {
data: data1
},
yAxis: {},
series: [{
name: '排产数量',
type: 'bar',
data: data2,
itemStyle: { //柱状图颜色
normal:{
color:'#3AE2CE',
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>