1.添加Echarts组件

按住“Ctrl+f”调出搜索框，输入“echarts二开”即可看到ECharts组件，点击即可添加至看板中。

2.查看代码

切换到该组件的代码选项卡中，可以看到已经默认有一个二开的代码文件，点击编辑按钮可以查看文件内容。

3.编写代码

根据您实际的需求修改代码并保存，保存后点击编辑按钮右侧的刷新按钮即可完成刷新，如替换成以下代码：

class EchartsSample {
init(){
//通过调用绑定组件的getMountedInstance获取echartsInstance
const echarts = this.element.getMountedInstance();
//从官方例子中拷贝代码
const option = {
xAxis: {
type: 'category',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%']
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 0,
seriesIndex: 0,
pieces: [
{
gt: 1,
lt: 3,
color: 'rgba(0, 0, 180, 0.4)'
},
{
gt: 5,
lt: 7,
color: 'rgba(0, 0, 180, 0.4)'
}
]
},
series: [
{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: '#5470C6',
width: 5
},
markLine: {
symbol: ['none', 'none'],
label: { show: false },
data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
},
areaStyle: {},
data: [
['2019-10-10', 200],
['2019-10-11', 560],
['2019-10-12', 750],
['2019-10-13', 580],
['2019-10-14', 250],
['2019-10-15', 300],
['2019-10-16', 450],
['2019-10-17', 300],
['2019-10-18', 100]
]
}
]
};
//调用setOption方法设置进去即可完成整个echarts的扩展编写
echarts.setOption(option);
}
}
export default EchartsSample