echarts画折线图心得html

最新推荐文章于 2021-10-23 20:04:39 发布

周有骛

最新推荐文章于 2021-10-23 20:04:39 发布

阅读量941

点赞数 2

文章标签： js 可视化

本文链接：https://blog.csdn.net/qazwsxedc1592674/article/details/107476533

版权

本文介绍了如何使用Echarts在HTML中绘制折线图，包括下载Echarts库、设置HTML画图区域、初始化画布以及调整option参数。强调了在处理图像重叠问题时，检查坐标刻度和系列配置的重要性。提供了官方开发文档链接，便于进一步学习。

摘要由CSDN通过智能技术生成

开始使用

从官网上下载echarts的依赖，有三个不同的版本，主要区别是其组件图表的完整度，可以查看详细信息以后再根据需求使用。
先要在html中添加画图的区域，最好是<div id='chart'></div>，然后在对应页面的js中用var chart = echarts.init(document.getElementById('chart'))将html中的div初始化为画图的画布(ps:init函数可以添加第二个参数选择主题，官方提供light，dark两个，也可以自己在官网设计主题，然后下载使用)。
echats画图有很多参数，用setOption()函数来添加参数，建议用一个变量来装参数，再setOption()。

option参数

var chartOption = {
   
    title:{
   
        text: '这里添加标题',
        show: true, //是否显示标题，默认为true
        link: '这里添加链接，点击标题转到，默认查找与该页面同级页面',
        target: '选择打开link页面的方法，self当前页面打开，blank新窗口打开，默认blank',
        textStyle:{
   //设置标题样式，更多参见开发手册
            color: '',
            fontStyle: ''
            ...
        }
        ...
        //还有更多的个性化样式配置，不一一介绍，可参考开发手册。
        //ps：除了主标题以外echarts还设置了副标题，在主标题相关参数项前加sub，如subtext。就可以对副标题设置。
    },
    legend: {
   
        type: '设置图例样式，plain普通图例，scroll可滚动翻页图例，默认plain',
        formatter: '可以用字符串模拟板{这里是引用，如name即引用series的name}',//也可以用函数，return的结果即是模板。如果不使用，则默认series的name值
        icon: '可以设置样式，内置有很多样式，circle圆形，rect矩形，roundRect圆角矩形，triangle三角形，diamond菱形，pin饼状(比圆形稍大一点点)，arrow箭头，none。还可以通过image://url添加图片的样式',
        tooltip:{
   //配置同之后讲的大项tooltip，显示图例的提示框
            show: true