1.安装 npm install echarts --save
<template> <div class="home"> <div id='main' style=" 600px;height:400px;"></div> </div> </template> <script> import echarts from 'echarts' export default { name: 'index', data () { return { option:{ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'line', data: [5, 20, 36, 10, 10, 20] },{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } } }, mounted () { // var echarts = require('echarts'); // 基于准备好的dom,初始化echarts实例 // var myChart = $echarts.init(document.getElementById('main')); var myChart = echarts.init(document.getElementById('main')); // 绘制图表 myChart.setOption(this.option); }, methods: { } } </script>
系列类型(series.type
)至少有:line(折线图)、bar(柱状图)、pie(饼图)、scatter(散点图)、graph(关系图)、tree(树图)
// 饼图
boption: {
title: {
text: "饼图",
},
series: [
{
name: "访问来源",
type: "pie",
radius: "55%", //饼图的大小
data: [
{ value: 235, name: "视频广告" },
{ value: 274, name: "联盟广告" },
{ value: 310, name: "邮件营销" },
{ value: 335, name: "直接访问" },
{ value: 400, name: "搜索引擎" },
],
},
],
},
// 加载中
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});
1.ECharts 折线图数据堆叠问题解决方法
去掉series中stack属性,或者将stack设置为不同的值
去掉stack属性后的图表,数值正常:
2.折线图背景设置
series: [ { data: [820, 932, 901, 934, 1290, 1330, 1320], type: "line", areaStyle: { color: 'rgb(24, 247, 237,0.7)' // 设置背景颜色 }, }, ],
转:https://blog.csdn.net/weixin_44606217/article/details/95304739