Echart使用

介绍

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

常用网址

在ECharts官网运行编辑实例：

Examples - Apache ECharts

EChartsoption中各参数详细配置项：

[Documentation - Apache ECharts](Documentation - Apache ECharts)

样例

常见问题

Echart主题设定

先进入echarts 官网，找到主题下载

配置好了选择下载，选择JSON版本

将json文件放入项目文件中并引入

<script>
    
import cdw from "../../../../assets/theme/cdw.json";

let obj = cdw;
echarts.registerTheme('cdw', obj)

var myChart = echarts.init(this.$refs.tc7,'cdw');
//var myChart = echarts.init(this.$refs.tc7,'dark');  // 也可以直接使用官方主题
    
</script>

使用服务端返回数据的异步加载和更新

详细请参考官方文档：

Documentation - Apache ECharts

实例：

<template>
    <div id="折线图" style="width: 100%; height: 500px;">
    </div>
</template>

<script>
       import * as echarts from 'echarts'
       import axios from "axios";
        export default {
            data(){
                return {
                    chartColumn: null,
                    mydata:null,
                    salePrice: null
                }
            },
            methods: {
                drawLine(){
                    this.chartColumn = echarts.init(
                        document.getElementById('折线图'));

                    this.chartColumn.setOption({
                    
                title: {
                    text: '汽车价格对比阶梯折线图',
                    textStyle: {
                    fontSize: 25,
                    color: '#ffffff'}
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: [],
                    textStyle:{
                            color: '#ffffff'//字体颜色
                        },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '',
                        type: 'line',
                        step: 'start',
                        data: []
                    },
                    {
                        name: '',
                        type: 'line',
                        step: 'middle',
                        data: []
                    }
                ]
            });
            axios.post("http://127.0.0.1:5000/carSalePrice.json").then((response) => {
                    this.salePrice = response.data;
                    console.log(this.salePrice)
                    this.chartColumn.setOption( //动画的配置 异步加载数据
                        this.salePrice
                    )
                });
                }
            }
        }
</script>